<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

  <link rel="stylesheet" href="/css/main.css">



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

  <script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {
      "hostname": "holidaypenguin.gitee.io",
      "root": "/",
      "images": "/images",
      "scheme": "Mist",
      "version": "8.2.2",
      "exturl": false,
      "sidebar": {
        "position": "right",
        "display": "always",
        "padding": 18,
        "offset": 12
      },
      "copycode": true,
      "bookmark": {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": false,
      "comments": {
        "style": "tabs",
        "active": null,
        "storage": true,
        "lazyload": false,
        "nav": null
      },
      "motion": {
        "enable": true,
        "async": true,
        "transition": {
          "post_block": "fadeIn",
          "post_header": "fadeInDown",
          "post_body": "fadeInDown",
          "coll_header": "fadeInLeft",
          "sidebar": "slideUpIn"
        }
      },
      "prism": false,
      "i18n": {
        "placeholder": "搜索...",
        "empty": "没有找到任何搜索结果：${query}",
        "hits_time": "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）",
        "hits": "找到 ${hits} 个搜索结果"
      },
      "path": "/search.xml",
      "localsearch": {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 1,
        "unescape": false,
        "preload": false
      }
    };
  </script>
  <meta property="og:type" content="article">
  <meta property="og:title" content="JavsScript ES8&amp;ES2017的新特性">
  <meta property="og:url" content="https://holidaypenguin.gitee.io/blob/2019-04-17-new-features-of-javsscript-es8-&-es2017/index.html">
  <meta property="og:site_name" content="HolidayPenguin">
  <meta property="og:locale" content="zh_CN">
  <meta property="article:published_time" content="2019-04-17T12:36:49.000Z">
  <meta property="article:modified_time" content="2019-04-17T12:36:49.000Z">
  <meta property="article:author" content="holidaypenguin">
  <meta property="article:tag" content="JavaScript">
  <meta property="article:tag" content="Ecma">
  <meta property="article:tag" content="ECMAScript">
  <meta property="article:tag" content="ES8">
  <meta property="article:tag" content="ES2017">
  <meta property="article:tag" content="ECMAScript 2017">
  <meta name="twitter:card" content="summary">


  <link rel="canonical" href="https://holidaypenguin.gitee.io/blob/2019-04-17-new-features-of-javsscript-es8-&-es2017/">


  <script class="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: false,
      isPost: true,
      lang: 'zh-CN'
    };
  </script>
  <title>JavsScript ES8&ES2017的新特性 | HolidayPenguin</title>





  <noscript>
    <style>
      body {
        margin-top: 2rem;
      }

      .use-motion .menu-item,
      .use-motion .sidebar,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header {
        visibility: visible;
      }

      .use-motion .header,
      .use-motion .site-brand-container .toggle,
      .use-motion .footer {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle,
      .use-motion .custom-logo-image {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line {
        transform: scaleX(1);
      }

      .search-pop-overlay,
      .sidebar-nav {
        display: none;
      }

      .sidebar-panel {
        display: block;
      }
    </style>
  </noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏" role="button">
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
            </div>
          </div>

          <div class="site-meta">

            <a href="/" class="brand" rel="start">
              <i class="logo-line"></i>
              <h1 class="site-title">HolidayPenguin</h1>
              <i class="logo-line"></i>
            </a>
          </div>

          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>



        <nav class="site-nav">
          <ul class="main-menu menu">
            <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
            <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
            <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
            <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
              </a>
            </li>
          </ul>
        </nav>



        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close" role="button">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div class="search-result-container no-result">
              <div class="search-result-icon">
                <i class="fa fa-spinner fa-pulse fa-5x"></i>
              </div>
            </div>

          </div>
        </div>

      </div>


      <div class="toggle sidebar-toggle" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
      </div>

      <aside class="sidebar">

        <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
          <ul class="sidebar-nav">
            <li class="sidebar-nav-toc">
              文章目录
            </li>
            <li class="sidebar-nav-overview">
              站点概览
            </li>
          </ul>

          <div class="sidebar-panel-container">
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
              <div class="post-toc animated">
                <ol class="nav">
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%A1%AB%E5%85%85%EF%BC%88padStart-%E5%92%8C-padEnd%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">字符串填充（padStart 和 padEnd）</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Object-values"><span class="nav-number">2.</span> <span class="nav-text">Object.values</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Object-entries"><span class="nav-number">3.</span> <span class="nav-text">Object.entries</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Object-getOwnPropertyDescriptors"><span class="nav-number">4.</span> <span class="nav-text">Object.getOwnPropertyDescriptors()</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8%E5%92%8C%E8%B0%83%E7%94%A8%E4%B8%AD%E7%9A%84%E5%B0%BE%E9%9A%8F%E9%80%97%E5%8F%B7"><span class="nav-number">5.</span> <span class="nav-text">函数参数列表和调用中的尾随逗号</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Async-Functions-%E5%BC%82%E6%AD%A5%E5%87%BD%E6%95%B0"><span class="nav-number">6.</span> <span class="nav-text">Async Functions (异步函数)</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98-%E5%92%8C-Atomics"><span class="nav-number">7.</span> <span class="nav-text">共享内存 和 Atomics</span></a></li>
                </ol>
                </li>
                <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number"></span> <span class="nav-text">参考</span></a>
              </div>
            </div>
            <!--/noindex-->

            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <p class="site-author-name" itemprop="name">holidaypenguin</p>
                <div class="site-description" itemprop="description"></div>
              </div>
              <div class="site-state-wrap site-overview-item animated">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">

                      <span class="site-state-item-count">138</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">

                      <span class="site-state-item-count">26</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">

                      <span class="site-state-item-count">234</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author site-overview-item animated">
                <span class="links-of-author-item">
                  <a href="https://github.com/holidaypenguin" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;holidaypenguin" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:songshipeng2016@gmail.com" title="E-Mail → mailto:songshipeng2016@gmail.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
                </span>
              </div>



            </div>
          </div>
        </div>
      </aside>
      <div class="sidebar-dimmer"></div>


    </header>


    <div class="back-to-top" role="button">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>

    <noscript>
      <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
    </noscript>


    <div class="main-inner post posts-expand">





      <div class="post-block">



        <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
          <link itemprop="mainEntityOfPage" href="https://holidaypenguin.gitee.io/blob/2019-04-17-new-features-of-javsscript-es8-&-es2017/">

          <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
            <meta itemprop="image" content="/images/avatar.gif">
            <meta itemprop="name" content="holidaypenguin">
            <meta itemprop="description" content="">
          </span>

          <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="HolidayPenguin">
          </span>
          <header class="post-header">
            <h1 class="post-title" itemprop="name headline">
              JavsScript ES8&ES2017的新特性
            </h1>

            <div class="post-meta-container">
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>

                  <time title="创建时间：2019-04-17 20:36:49" itemprop="dateCreated datePublished" datetime="2019-04-17T20:36:49+08:00">2019-04-17</time>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-folder"></i>
                  </span>
                  <span class="post-meta-item-text">分类于</span>
                  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                    <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                  </span>
                </span>


                <span id="/blob/2019-04-17-new-features-of-javsscript-es8-&-es2017/" class="post-meta-item leancloud_visitors" data-flag-title="JavsScript ES8&ES2017的新特性" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
              </div>

              <div class="post-description">
                <!-- more -->
              </div>
            </div>
          </header>




          <div class="post-body" itemprop="articleBody">
            <p>写在前面的话标准非实际情况。</p>
            <p>ECMAScript 2017，ECMA-262 标准版本的第8版（通常称为ES2017或ES8），于 2017 年 6 月完成。</p>
            <blockquote>
              <p>ECMAScript 2017 introduced Async Functions, Shared Memory, and Atomics along with smaller language and library enhancements, bug fixes, and editorial updates. Async functions improve the asynchronous programming experience by providing syntax for promise-returning functions. Shared Memory and Atomics introduce a new memory model that allows multi-agent programs to communicate using atomic operations that ensure a well-defined execution order even on parallel CPUs. This specification also includes new static methods on Object: Object.values, Object.entries, and Object.getOwnPropertyDescriptors.</p>
            </blockquote>
            <p>与 ES6 相比，ES8 是 JavaScript 的一个小版本，但它仍然引入了非常有用的功能：</p>
            <ul>
              <li>字符串填充（padStart 和 padEnd）</li>
              <li>Object.values</li>
              <li>Object.entries</li>
              <li>Object.getOwnPropertyDescriptors()</li>
              <li>函数参数列表和调用中的尾随逗号</li>
              <li>Async Functions (异步函数)</li>
              <li>共享内存 和 Atomics</li>
            </ul>
            <h2 id="字符串填充（padStart-和-padEnd）"><a href="#字符串填充（padStart-和-padEnd）" class="headerlink" title="字符串填充（padStart 和 padEnd）"></a>字符串填充（padStart 和 padEnd）</h2>
            <p>如果某个字符串不够指定长度，会在头部或尾部补全。<code>padStart()</code>用于头部补全，<code>padEnd()</code>用于尾部补全。</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">padStart(targetLength [, padString])</span><br><span class="line">padEnd(targetLength [, padString])</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="string">&#x27;x&#x27;</span>.padStart(<span class="number">5</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;ababx&#x27;</span></span><br><span class="line"><span class="string">&#x27;x&#x27;</span>.padStart(<span class="number">4</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;abax&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="string">&#x27;x&#x27;</span>.padEnd(<span class="number">5</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;xabab&#x27;</span></span><br><span class="line"><span class="string">&#x27;x&#x27;</span>.padEnd(<span class="number">4</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;xaba&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="string">&#x27;xxx&#x27;</span>.padStart(<span class="number">2</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;xxx&#x27;</span></span><br><span class="line"><span class="string">&#x27;xxx&#x27;</span>.padEnd(<span class="number">2</span>, <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// &#x27;xxx&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="string">&#x27;abc&#x27;</span>.padStart(<span class="number">10</span>, <span class="string">&#x27;0123456789&#x27;</span>) <span class="comment">// &#x27;0123456abc&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="string">&#x27;x&#x27;</span>.padStart(<span class="number">4</span>) <span class="comment">// &#x27;   x&#x27;</span></span><br><span class="line"><span class="string">&#x27;x&#x27;</span>.padEnd(<span class="number">4</span>) <span class="comment">// &#x27;x   &#x27;</span></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/string#padStart%EF%BC%8CpadEnd">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="Object-values"><a href="#Object-values" class="headerlink" title="Object.values"></a>Object.values</h2>
            <p>这个方法返回一个包含所有对象自身属性值的数组</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="keyword">const</span> person = &#123; <span class="attr">name</span>: <span class="string">&#x27;Fred&#x27;</span>, <span class="attr">age</span>: <span class="number">87</span> &#125;</span><br><span class="line"><span class="built_in">Object</span>.values(person) <span class="comment">// [&#x27;Fred&#x27;, 87]</span></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>
            <p>也适用于数组:</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="keyword">const</span> people = [<span class="string">&#x27;Fred&#x27;</span>, <span class="string">&#x27;Tony&#x27;</span>]</span><br><span class="line"><span class="built_in">Object</span>.values(people) <span class="comment">// [&#x27;Fred&#x27;, &#x27;Tony&#x27;]</span></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/object-methods#Object-keys%EF%BC%8CObject-values%EF%BC%8CObject-entries">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="Object-entries"><a href="#Object-entries" class="headerlink" title="Object.entries"></a>Object.entries</h2>
            <p>方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="keyword">const</span> person = &#123; <span class="attr">name</span>: <span class="string">&#x27;Fred&#x27;</span>, <span class="attr">age</span>: <span class="number">87</span> &#125;</span><br><span class="line"><span class="built_in">Object</span>.entries(person) <span class="comment">// [[&#x27;name&#x27;, &#x27;Fred&#x27;], [&#x27;age&#x27;, 87]]</span></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>
            <p>也适用于数组</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="keyword">const</span> people = [<span class="string">&#x27;Fred&#x27;</span>, <span class="string">&#x27;Tony&#x27;</span>]</span><br><span class="line"><span class="built_in">Object</span>.entries(people) <span class="comment">// [[&#x27;0&#x27;, &#x27;Fred&#x27;], [&#x27;1&#x27;, &#x27;Tony&#x27;]]</span></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/object-methods#Object-keys%EF%BC%8CObject-values%EF%BC%8CObject-entries">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="Object-getOwnPropertyDescriptors"><a href="#Object-getOwnPropertyDescriptors" class="headerlink" title="Object.getOwnPropertyDescriptors()"></a>Object.getOwnPropertyDescriptors()</h2>
            <p>返回对象的所有自有（非继承的）属性描述符。</p>
            <p>描述符是属性(property) 的一组特性(attributes)，它由以下的子集组成：</p>
            <ul>
              <li>value：属性的值</li>
              <li>writable：true 表示改属性可以被修改</li>
              <li>get：属性的 getter 函数，在读取属性时调用</li>
              <li>set：属性的 setter 函数，在属性设置值时调用</li>
              <li>configurable：如果为 false ，则不能删除属性，也不能更改任何属性，但值除外</li>
              <li>enumerable：如果属性是可枚举的，则为 true</li>
            </ul>
            <p>该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="keyword">const</span> shallowMerge = <span class="function">(<span class="params">target, source</span>) =&gt;</span> <span class="built_in">Object</span>.defineProperties(</span><br><span class="line">  target,</span><br><span class="line">  <span class="built_in">Object</span>.getOwnPropertyDescriptors(source)</span><br><span class="line">);</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>另外还有 <code>Object.create</code> 和 <code>对象继承</code> 的问题，请查看更多信息。</p>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/object-methods#Object-getOwnPropertyDescriptors">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="函数参数列表和调用中的尾随逗号"><a href="#函数参数列表和调用中的尾随逗号" class="headerlink" title="函数参数列表和调用中的尾随逗号"></a>函数参数列表和调用中的尾随逗号</h2>
            <p>此功能允许在函数声明和函数调用中使用尾随逗号，此功能在参数换行显示的时候比较明显</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clownsEverywhere</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  param1,</span></span></span><br><span class="line"><span class="function"><span class="params">  param2,</span></span></span><br><span class="line"><span class="function"><span class="params"></span>) </span>&#123; <span class="comment">/* ... */</span> &#125;</span><br><span class="line"></span><br><span class="line">clownsEverywhere(</span><br><span class="line">  <span class="string">&#x27;foo&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;bar&#x27;</span>,</span><br><span class="line">);</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>如果没有后面的逗号，修改代码的时候就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接有一个逗号。</p>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/function#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E7%9A%84%E5%B0%BE%E9%80%97%E5%8F%B7">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="Async-Functions-异步函数"><a href="#Async-Functions-异步函数" class="headerlink" title="Async Functions (异步函数)"></a>Async Functions (异步函数)</h2>
            <p>ES2017 引入了 Async Functions (异步函数) 的概念，这是该版本中引入的最重要的变化。</p>
            <p>当 Promise 在 ES2015 中引入时，它们的目的是解决异步代码的问题，并且他们做到了。但在 ES2015 和 ES2017 相间隔的两年时间里，很明显， Promise 并不是最终的解决方案。</p>
            <p>引入 Promise 是为了解决著名的 回调地狱 问题，但它们引入了自己的复杂性和语法复杂性。它们是良好的原语，可以向开发人员公开更好的语法：那就是Async Functions (异步函数)。</p>
            <p>一个简单的例子：</p>
            <figure class="highlight js">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomethingAsync</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> resolve(<span class="string">&#x27;I did something&#x27;</span>), <span class="number">3000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">await</span> doSomethingAsync())</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;Before&#x27;</span>)</span><br><span class="line">doSomething()</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;After&#x27;</span>)</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>
            <p>输出如下内容：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Before</span><br><span class="line">After</span><br><span class="line">I did something &#x2F;&#x2F;after 3s</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>如果在<code>promise</code>中发生错误，在调用<code>doSomething</code>之后添加<code>catch</code>方法。</p>
            <p>等多详细用法点击查看更多信息</p>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/async">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h2 id="共享内存-和-Atomics"><a href="#共享内存-和-Atomics" class="headerlink" title="共享内存 和 Atomics"></a>共享内存 和 Atomics</h2>
            <p>WebWorkers 用于在浏览器中创建多线程程序。</p>
            <p>他们通过事件提供消息传递协议。 从ES2017开始，您可以使用 SharedArrayBuffer 在 Web worker 及其创建者之间创建共享内存数组。</p>
            <p>由于我们不知道向共享内存部分写入要花费多少时间来传播，因此 Atomics 是一种在读取值时执行该操作的方法，并且完成了任何类型的写入操作。</p>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/arraybuffer#SharedArrayBuffer">&gt;&gt;查看更多信息&lt;&lt;</a><br><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/arraybuffer#Atomics-%E5%AF%B9%E8%B1%A1">&gt;&gt;查看更多信息&lt;&lt;</a></p>
            <h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1>
            <p><a target="_blank" rel="noopener" href="https://www.html.cn/archives/9981">ES2017（ES8）带来的重大新特性 – JavaScript 完全手册（2018版）</a><br><a target="_blank" rel="noopener" href="https://blog.csdn.net/zuggs_/article/details/80650436">ES7和ES8新特性</a><br><a target="_blank" rel="noopener" href="http://www.ecma-international.org/ecma-262/8.0/index.html">ecma-262-8.0</a></p>

          </div>





          <footer class="post-footer">
            <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
              <a href="/tags/Ecma/" rel="tag"># Ecma</a>
              <a href="/tags/ECMAScript/" rel="tag"># ECMAScript</a>
              <a href="/tags/ES8/" rel="tag"># ES8</a>
              <a href="/tags/ES2017/" rel="tag"># ES2017</a>
              <a href="/tags/ECMAScript-2017/" rel="tag"># ECMAScript 2017</a>
            </div>



            <div class="post-nav">
              <div class="post-nav-item">
                <a href="/blob/2019-04-17-new-features-of-javsscript-es7-&-es2016/" rel="prev" title="JavsScript ES7&ES2016的新特性">
                  <i class="fa fa-chevron-left"></i> JavsScript ES7&ES2016的新特性
                </a>
              </div>
              <div class="post-nav-item">
                <a href="/blob/2019-04-17-new-features-of-javsscript-es9-&-es2018/" rel="next" title="JavsScript ES9&ES2018的新特性">
                  JavsScript ES9&ES2018的新特性 <i class="fa fa-chevron-right"></i>
                </a>
              </div>
            </div>
          </footer>
        </article>
      </div>







      <script>
        window.addEventListener('tabs:register', () => {
          let {
            activeClass
          } = CONFIG.comments;
          if (CONFIG.comments.storage) {
            activeClass = localStorage.getItem('comments_active') || activeClass;
          }
          if (activeClass) {
            const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
            if (activeTab) {
              activeTab.click();
            }
          }
        });
        if (CONFIG.comments.storage) {
          window.addEventListener('tabs:click', event => {
            if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
            const commentClass = event.target.classList[1];
            localStorage.setItem('comments_active', commentClass);
          });
        }
      </script>
    </div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


      <div class="copyright">
        &copy;
        <span itemprop="copyrightYear">2021</span>
        <span class="with-love">
          <i class="fa fa-heart"></i>
        </span>
        <span class="author" itemprop="copyrightHolder">holidaypenguin</span>
      </div>
      <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" class="theme-link" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
      </div>

    </div>
  </footer>


  <script size="300" alpha="0.1" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="/js/love.js"></script>

  <script src="/js/development.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/js/motion.js"></script>
  <script src="/js/schemes/muse.js"></script>
  <script src="/js/next-boot.js"></script>


  <script src="/js/local-search.js"></script>









  <script>
    (function() {
      function leancloudSelector(url) {
        url = encodeURI(url);
        return document.getElementById(url).querySelector('.leancloud-visitors-count');
      }

      function addCount(Counter) {
        const visitors = document.querySelector('.leancloud_visitors');
        const url = decodeURI(visitors.id);
        const title = visitors.dataset.flagTitle;

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            if (results.length > 0) {
              const counter = results[0];
              leancloudSelector(url).innerText = counter.time + 1;
              Counter('put', '/classes/Counter/' + counter.objectId, {
                  time: {
                    '__op': 'Increment',
                    'amount': 1
                  }
                })
                .catch(error => {
                  console.error('Failed to save visitor count', error);
                });
            } else {
              Counter('post', '/classes/Counter', {
                  title,
                  url,
                  time: 1
                })
                .then(response => response.json())
                .then(() => {
                  leancloudSelector(url).innerText = 1;
                })
                .catch(error => {
                  console.error('Failed to create', error);
                });
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      function showTime(Counter) {
        const visitors = document.querySelectorAll('.leancloud_visitors');
        const entries = [...visitors].map(element => {
          return decodeURI(element.id);
        });

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url: {
              '$in': entries
            }
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            for (let url of entries) {
              const target = results.find(item => item.url === url);
              leancloudSelector(url).innerText = target ? target.time : 0;
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      const {
        app_id,
        app_key,
        server_url
      } = {
        "enable": true,
        "app_id": "povuqNsSqFodlakVIwtEX5kb-gzGzoHsz",
        "app_key": "zXD40RDtDB3DMtpC89k0AK7g",
        "server_url": null,
        "security": false
      };

      function fetchData(api_server) {
        const Counter = (method, url, data) => {
          return fetch(`${api_server}/1.1${url}`, {
            method,
            headers: {
              'X-LC-Id': app_id,
              'X-LC-Key': app_key,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
          });
        };
        if (CONFIG.page.isPost) {
          if (CONFIG.hostname !== location.hostname) return;
          addCount(Counter);
        } else if (document.querySelectorAll('.post-title-link').length >= 1) {
          showTime(Counter);
        }
      }

      const api_server = app_id.slice(-9) === '-MdYXbMMI' ? `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com` : server_url;

      if (api_server) {
        fetchData(api_server);
      } else {
        fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
          .then(response => response.json())
          .then(({
            api_server
          }) => {
            fetchData('https://' + api_server);
          });
      }
    })();
  </script>



<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>